<template>
    <div class="userCenter">
        <div class="box80">
            <el-tabs v-model="activeName">
                <el-tab-pane label="个人资料" name="data">
                    <div class="personalData">
                        <el-form ref="data_sq" label-width="100px">
                            <div class="wid100">
                                <div class="lt">
                                    <el-form-item label="登录名：" class="t2">
                                        <span>{{form.loginName}}</span>    
                                    </el-form-item>
                                    <el-form-item label="公司名称：" class="t2">
                                        <span>{{form.organization.orgName}}</span>
                                    </el-form-item>
                                    <el-form-item label="性  别：">
                                        <el-radio-group v-model="form.userGender">
                                            <el-radio :label="1">先生</el-radio>
                                            <el-radio :label="2">女士</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="昵   称：">
                                        <el-input v-model="form.userName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系方式：">
                                        <el-input v-model="form.userPhone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电子邮件：">
                                        <el-input v-model="form.userEmail"></el-input>
                                    </el-form-item>
                                </div>
                                <div class="rt">
                                    <el-upload
                                        class="avatar-uploader"
                                        :headers ="headers"
                                        :action="uploadUrl"
                                        :show-file-list="false"
                                        :on-success="handle"
                                        :before-upload="befor">
                                        <img v-if="form.userIcon" :src="ImgPath + form.userIcon" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                     <div class="sss">
                                    修改头像
                                </div> 
                                </div>
                            </div>
                            <el-form-item label="描  述：">
                                <el-input type="textarea" v-model="form.userDesc"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <div class='text-center'><el-button type="primary" @click="updateUserInfo">保存</el-button></div>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="收藏" name="collection">
                    
                </el-tab-pane>
                <el-tab-pane label="关注" name="focusOn">
                    
                </el-tab-pane>
                <el-tab-pane label="修改密码" name="password">
                     <el-form ref="data_sq" label-width="100px" class="passwordData">
                         <el-form-item label="原密码：">
                            <el-input type="password" v-model="passform.oldPassword" placeholder="请输入原密码"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码：">
                            <el-input type="password" v-model="passform.password" placeholder="8-16位密码，区分大小写"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码：">
                            <el-input type="password" v-model="passform.qrpassword" placeholder="8-16位密码，区分大小写"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="updatePassword">保存</el-button>
                            <!-- <el-button>取消</el-button> -->
                        </el-form-item>
                     </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            activeName: 'data',
            headers: {
                "Authorization": localStorage.getItem('token')
            },
            uploadUrl:'',
            form:{
                loginName:'',
                organization:{
                    orgName:''
                },
                userGender:'',
                userName:'',
                userPhone:'',
                userEmail:'',
                userIcon:'',
                userDesc:''
            },
            passform:{}
        }
    },
    methods: {
      handle(res, file) {
            if(res.success){
                this.$nextTick(()=>{
                    this.form.userIcon = res.data.savePath
                })
            }
      },
      befor(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      getUserInfo(){
          let self = this
          this.$http.get('/api/users/getCurrentUser',{},function(res){
              if(res.success){
                    console.log(res)
                    self.form = res.data
                    self.form = {
                        id:res.data.id,
                        loginName:res.data.loginName,
                        organization:{
                            orgName:res.data.organization.orgName
                        },
                        userGender:res.data.userGender,
                        userName:res.data.userName,
                        userPhone:res.data.userPhone,
                        userEmail:res.data.userEmail,
                        userIcon:res.data.userIcon,
                        userDesc:res.data.userDesc
                    }
                }
          })
        this.uploadUrl = this.$http.getSignUrl('/api/files/upload',{type:'image'})
      },
      updateUserInfo(){
          let self = this
          this.$http.putObj('/api/users',this.form,function(res){
              if(res.success){
                    self.$message({
                        message: "提交成功！",
                        type: "success"
                    });
                }else{
              self.$message.error(res.data)
            }
          })
      },
      updatePassword(){
          if(this.passform.oldPassword == ''){
              this.$message.error('请输入原密码')
              return false
          }
          if(this.passform.password == ''){
              this.$message.error("请输入密码")
              return
          }
          if(this.passform.password.length < 8 || this.passform.password.length > 16){
              this.$message.error("新密码必须长度为8-16位")
              return
          }
          if(this.passform.qrpassword.length < 8 || this.passform.qrpassword.length > 16){
              this.$message.error("确认密码必须长度为8-16位")
              return
          }
          if(this.passform.qrpassword != this.passform.password){
              this.$message.error("两次密码不一致！")
              return
          }
          let self = this
          this.$http.postQuery('/api/resetCurrentPwd',this.passform,function(res){
              if(res.success){
                    self.$message({
                        message: "提交成功！",
                        type: "success"
                    });
                    localStorage.setItem('token','')
                    self.$router.push({path: '/login'});
                }else{
              self.$message.error(res.data)
            }
          })
      }
    },
    created(){
        this.getUserInfo()
    }
}
</script>


<style  rel="stylesheet/scss" lang="scss"   >
.passwordData{
    width: auto;
    text-align: center;
    padding: 2% 0;
    width: 410px;
    margin: auto;
     .tisi{
            line-height: 1em;
            margin-bottom: 10px;
            text-align: left;
            padding-left: 100px;
            color: #b1b8be;
        }
    .el-form-item{
       margin-bottom: 14px;
        .el-button--primary{
            background-color: #5a63a3;
            color: #fff;
            border: none;
        }
        .el-form-item__content{
            
        }
    } 
}
.userCenter .box80{
    margin-top: 120px;
    margin-bottom: 100px;
    background: #fff;
    border-radius: 5px;
    .el-tabs__nav{
        width: 100%;
        float: none;
    }
    .el-tabs__active-bar{
        display: none;
    }
    .el-tabs__item{
        width: 25%;
        text-align: center;
        border-left: solid 1px rgba(153, 153, 153, 0.3);
        padding: 0;
        height: 50px;
        line-height: 50px;
        &:nth-child(2){
            border: none;
        }
        &.is-active{
            background-color: #5a63a3;
            color: #fff;
            border: none;
        }
    }
    .personalData{
        width: 80%;
        margin: 4% auto;
        .text-center{
            text-align: center;
             button{
                background-color: #5962a3;
                border-radius: 3px;
                color: #ffffff;
                margin: auto;
                border: none;
            }
        }
        .lt{
            width: calc(100% - 230px);
            width: -webkit-calc(100% - 230px);
            float: left;
            .t2{
                margin-bottom: 0;
            }
        }
        .rt{
            width: 160px;
            float: right;
            margin-right: 2px;
            text-align: center;
            margin-top: 70px;
             .avatar-uploader{
                 .el-upload {
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                    overflow: hidden;
                    border-radius:50%;
                    &:hover {
                        border-color: #409EFF;
                    }
                }
             } 
             .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 160px;
                height: 160px;
                line-height: 160px;
                text-align: center;
                border-radius:50%;
            }
            .avatar-uploader-icon {
                width: 160px;
                height: 160px;
                display: block;
                border-radius:50%; 
            }
        }
    }
}

</style>